<template>
  <el-container>
   <div class="logo"></div>
    <el-main>
      <el-form label-position="left" label-width="70px">
        <el-form-item label="用户名" >
          <el-input placeholder="请输入用户名" class="ipt" v-model=uname></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">密&nbsp;&nbsp;&nbsp;码</label>
          <el-input show-password class="ipt" v-model=password placeholder="请输入密码" id="inpt"></el-input>
        </el-form-item>
        <div v-show="tips" style="margin-bottom:10px">
            <el-alert
                title="用户名或密码错误"
                type="error"
                 show-icon>
                 </el-alert>
        </div>
          <el-button type="warning" :disabled="disabled" @click="load()">登 录</el-button>
      </el-form>
    </el-main>
    <el-footer>
      <el-link ><router-link to="register">注册</router-link></el-link>
      <el-link ><router-link to="">忘记密码</router-link></el-link>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
       uname:"",
       password:"",
       tips:false
    }
  },
  methods:{
    load(){
      this.$http.post('api/users/load',{
        uname:this.uname,
        password:this.password
      }).then(data=>{
        console.log(data);
        if(data.data.errCode == 0 ){
          sessionStorage.setItem("id",data.data.userInfo.id);
          sessionStorage.setItem("uname",data.data.userInfo.uname);
          sessionStorage.setItem('profile',data.data.userInfo.profile);
          
          // vuex
          this.$store.commit("updateUser",data.data.userInfo);

          this.$router.push("mine");

        }else{
          this.tips = true;
        }
      })
    },
  },
  computed:{
    disabled:function(){
      return (this.uname!=""&&this.password!="")?false:true
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
 .el-footer .el-link:nth-child(1){
      float:left;
  }
 .el-footer .el-link:nth-child(2){
    float:right;
  }
 .el-button--warning{
    width:100%;
  }
.logo{
      width: 200px;
      height: 200px;
      background: url(../../assets/images/logo.png) no-repeat;
      background-size:contain ;
      margin: auto;
      margin-top: 25px;
    }
    // .el-input{
    //   .el-input__inner{
    //       border:1px solid transparent !important;
    //   }
    // }
 
</style>
